"loader"
Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<svg width="120px" height="60px">
<path class="infinity-path" stroke="#fff" d="M 30 10 a 20 20 0 1 0 0 40 c 20 0 40 -40 60 -40 a 20 20 0 0 1 0 40 c -20 0 -40 -40 -60 -40"></path>
</svg>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
background: yellowgreen;
}
svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.6);
}
path {
fill: none;
stroke: #333;
stroke-width: 12;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var infinity = document.querySelector('.infinity-path');
var infinityIcon = new Moveit(infinity, {
start: '0%',
end: '10%'
});
function animate() {
infinityIcon.set({
start: '20%',
end: '101',
duration: 1,
follow: true,
callback: function() {
animate();
}
});
}
animate();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard
Boll css loader

Questions / Comments: